<template>
    <!-- d:\applet\byteApplet\dy-wallpaper-applet-2\pages\apply\apply.ttml -->

    <view>
        <form @submit="formSubmit">
			
			<view class="cu-form-group" style="height: 100px;">
				<view class="title">头像</view>
				<view class="grid col-4 grid-square flex-sub" @click="ChooseImage">
					<view class="bg-img guoshao-touxian" >
						<image :src="pic" mode="aspectFill" ></image>
					</view>
					<view class="solids guoshao-choose"  v-if="pic == null">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
            <view class="cu-form-group">
                <view class="title">姓名</view>
                <input placeholder="请输入姓名" name="nickname" :value="nickname" maxlength="10" />
            </view>
			<view class="cu-form-group">
			    <view class="title">手机号码</view>
			    <input placeholder="请输入手机号" type="number" name="phone" :value="phone" maxlength="11" @input="phoneInput" />
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
  <!--
            <view class="cu-form-group">
                <view class="title">手机号码</view>
                <input placeholder="请输入手机号" type="number" name="phone" :value="phone" maxlength="11" @input="phoneInput" />
                <button class="cu-btn bg-blue shadow guoshao-bg" :disabled="buttonDisable" @click.stop.prevent="sendCode">{{ time }}</button>
              
			<view class="cu-capsule radius">
				<view class='cu-tag bg-blue '>
					+86
				</view>
				<view class="cu-tag line-blue">
					中国大陆
				</view>
			</view>
            </view>
            <view class="cu-form-group">
                <view class="title">验证码</view>
                <input placeholder="请输入6位验证码" name="code" :value="code" @input="codeInput" maxlength="6" />
            </view>-->
            <view class="cu-form-group">
                <view class="title">微信号</view>
                <input placeholder="请输入微信号" name="wxaccount" :value="wxaccount" maxlength="30" />
            </view>
            <view class="cu-form-group">
                <view class="title">抖音号</view>
                <input placeholder="请输入抖音号(选填)" name="dyaccount" :value="dyaccount" maxlength="30" />
                <!--
			<text class='cuIcon-locationfill text-orange'></text>
			-->
            </view>
            <view class="cu-form-group">
                <view class="title">创作者口令</view>
                <input placeholder="请输入字母，或数字建议控制在8位" name="word" :value="word" maxlength="8" @input="wordInput" />
                <button class="cu-btn bg-blue shadow guoshao-word" @click.stop.prevent="checkWord">检测口令</button>
            </view>

			<view class="cu-form-group">
				<view class="title">推荐人口令</view>
				<input placeholder="请输入推荐人口令(选填)" :value="recommenderWord" name="recommenderWord" maxlength="8"></input>
			</view>

			<view class="cu-form-group">
				<text class="" style="color: #ababab;">如果没有推荐人口令，可填写平台默认口令：888</text>
			</view>
			<view class="" style="padding: 10px;">
				<text class="" style="color: red;">
					申请创作者后请联系客服，备注创作者加口令以便快速审核。
				</text>
				<text class="" style="color: #2BB1F2;" @click="copyContact" v-if="configs.length > 0">
					点击复制联系方式
				</text>
			</view>
			
			 <view class="line" style="margin-left: 20px;margin-top: 20px;" v-if="showMenu">
				<jiuaiCheckbox @change="changeBox" :borderStyle="checked ? '1px solid #5571DD' : '1px solid #d1d1d1'" :value="checked"></jiuaiCheckbox>
				<text style="margin-left: 5px;color: #0081FF;" @click="creator">我已阅读并同意《创作者协议》</text>
			 </view>
            <view class="padding flex flex-direction">
                <button class="cu-btn bg-blue margin-tb-sm lg round guoshao-bg" formType="submit">立即注册</button>
            </view>
			
			
        </form>
    </view>
</template>

<script>
import tuiLoading from '../../components/loading/loading';
import tuiLoadmore from '../../components/loadmore/loadmore';
import tuiNomore from '../../components/nomore/nomore';
import jiangqiePoster from '../../components/poster/poster/index';
import jiuaiCheckbox from "@/components/jiuai-checkbox/jiuai-checkbox.vue";


const Config = require('../../utils/config.js');

const Constant = require('../../utils/constants.js');

const Rest = require('../../utils/rest');

const http = require('../../utils/http.js');

const util = require('../../utils/util.js');

const platformEnv = require('../../utils/platformEnv.js');

const Authentication = require('../../utils/authentication'); 

var interval = null;

export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore,
        jiangqiePoster,
		jiuaiCheckbox
    },
    data() {
        return {
			showMenu:Constant.SHOW_MEUN,
            //设置初始的状态、包含字体、颜色、还有等待事件 > <
            time: '获取验证码',
            //倒计时
            currentTime: 60,
            buttonDisable: false,
			pic:null,
            nickname: '',
            phone: '',
            wxaccount: '',
            dyaccount: '',
            word: '',
            recommenderWord: '',
            cardName: '',
            bankCardNo: '',
            bankName: '',
            bankBranch: '',
            cWord: '',
            code: '',
            isSend: true,
			checked:false,
			configs:[],
        };
    },
    onLoad: function (options) {
		util.getConfigs(this,"wx");
	},
    onShow: function () {
		if(!Authentication.isLogin()){
			//console.log(Authentication.isLogin());
			//http.loginAp();
			uni.showModal({
				title:'为了更好的体验',
				content:'申请前请先登录',
				cancelText:'取消',
				confirmText:'确定',
				success(res) {
					if(res.confirm){
						uni.switchTab({
							url:"/pages/ucenter/ucenter"
						})
					}else{
						uni.switchTab({
							url:"/pages/index/index"
						})
					}
				}
			})
		}
	},
	onShareAppMessage: function () {
	    var that = this;
	    uni.showShareMenu({
	        withShareTicket: true,
	        menus: ['shareAppMessage', 'shareTimeline']
	    });
	    return {
	        title: that.shares.share_title,
	        imageUrl: that.shares.share_image,
			path: '/pages/apply/apply',
	    };
	},
    methods: {
		copyContact: function (e) {
		    uni.setClipboardData({
		        data: this.configs[0].value,
		        success: function (res) {
		            uni.showToast({
		                title: '复制成功',
		                duration: 2000,
						icon:'none',
		                success(res) {},
		            
		                fail(res) {}
		            });
		        }
		    });
		},
		creator:function(){
			uni.navigateTo({
				url:'/pages/about/creAgreement'
			})
		},
		changeBox(e){//选中切换事件(由组件发起)
			let checked = e.detail.checked; 
			this.setData({
			    checked: checked
			});
		},
        //获取用户输入的用户名
        wordInput: function (e) {
            this.setData({
                cWord: e.detail.value
            });
        },

        /**
         * 检测口令
         */
        checkWord: function (event) {
            let that = this;

            if (this.cWord == '') {
                uni.showToast({
                    title: '请输入口令',
                    duration: 1500,
                    icon: 'none'
                });
                return;
            }

            uni.showLoading({
                title: '检测中...'
            });
            var params = {
                url: '/talent/checkWord',
                method: 'GET',
                data: {
                    word: that.cWord
                },
                callBack: function (res) {
                    uni.hideLoading();

                    if (res.code == 200) {
                        uni.showToast({
                            title: res.data,
                            duration: 2000
                        });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            duration: 2000,
                            icon: 'none'
                        });
                    }
                }
            };
            http.request(params);
        },

		ChooseImage() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				//sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					let maxByte = 1024*1024* 5;
					
					if(res.tempFiles[0].size > maxByte){
						uni.showToast({
						    title: '请上传5M内的',
						    // 内容
						    icon: 'none' // 图标
						});
						return;
					}
					that.pic = res.tempFiles[0].path;
				},
				fail(err) {
					let errType = err.errMsg.includes("chooseImage:fail cancel") ? "取消选择" : "选择失败";
					console.log(err);
					if(err.errMsg === 'chooseImage:fail auth deny'){
						uni.openSetting({
							success(res) {
							},
						})
					}
					
				  },
				  complete(res) {
				  },
			});
		},
        //验证码
        codeInput: function (e) {
            this.setData({
                code: e.detail.value
            });
        },

        phoneInput: function (e) {
            this.setData({
                phone: e.detail.value
            });
        },

        /**
         * 获取验证码
         */
        sendCode: function () {
            let that = this;

            if (this.buttonDisable) {
                return false;
            } //倒计时状态不可点击

            if (that.phone == '') {
                uni.showToast({
                    title: '请输入手机号',
                    // 内容
                    icon: 'none' // 图标
                });
                return;
            }

            if (that.phone.length < 11) {
                uni.showToast({
                    title: '手机号有误',
                    // 内容
                    icon: 'none' // 图标
                });
                return;
            }

            this.setData({
                buttonDisable: true
            }); 
			
			// if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(this.data.tel))) {
            //   this.toast('手机号输入错误');
            //   return;
            // }
            // 60秒后重新获取验证码

            var currentTime = that.currentTime;
            let interval = setInterval(function () {
                currentTime--;
                that.setData({
                    time: currentTime + '秒后重发',
                    buttonDisable: true
                });

                if (currentTime <= 0) {
                    clearInterval(interval);
                    that.setData({
                        time: '重新发送',
                        currentTime: 60,
                        buttonDisable: false
                    });
                }
            }, 1000);
            uni.showLoading({
                title: '正在发送'
            });
            var params = {
				baseUrl:true,
                url: '/sms/send',
                method: 'POST',
                data: {
                    mobile: that.phone,
                    userId: Authentication.getUserId()
                },
                callBack: function (res) {
                    if (res.code == 200) {
                        uni.hideLoading();
                        uni.showToast({
                            title: '发送成功',
                            duration: 2000,
							icon:'none'
                        });
						that.setData({
						    isSend: true
						});
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            duration: 2000
                        });
						that.setData({
						    isSend: false
						});
                    }

                    
                }
            };
            http.request(params);
        },

        formSubmit: function (event) {
			
            let that = this;
			
            that.setData(event.detail.value);

            if (!that.checkdForm()) {
                return;
            }

            uni.showLoading({
                title: '提交中'
            });
			//图片上传
			uni.uploadFile({
			  baseUrl:true,
			  url: Config.domain +"/talent/register",
			  filePath: that.pic,
			  name: 'file',
			  header: {
				systemType: platformEnv.SystemType,
			    'accept': 'application/json',
			    'Authorization':  uni.getStorageSync(Constant.USER_TOKEN_KEY)
			  },
			  formData:event.detail.value,
			  success: function(res){
				
				if(res.statusCode == 200 || res.statusCode == undefined){
					res = JSON.parse(res.data);
					if (res.code == 200) {
						uni.hideLoading();
						that.setData({
							nickname: '',
							phone: '',
							wxaccount: '',
							dyaccount: '',
							word: '',
							recommenderWord: '',
							cardName: '',
							bankCardNo: '',
							bankName: '',
							bankBranch: '',
							code: '',
							pic:null
						});
						uni.showToast({
							title: '注册成功,待审核',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack({
								
							})
							
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
				
			  },
			  fail: function(res){
				  console.log(res);
			  },
			})
			
            /*var params = {
                url: '/talent/reg',
                method: 'POST',
                data: event.detail.value,
                callBack: function (res) {
                    if (res.code == 200) {
                        uni.hideLoading();
                        that.setData({
                            nickname: '',
                            phone: '',
                            wxaccount: '',
                            dyaccount: '',
                            word: '',
                            recommenderWord: '',
                            cardName: '',
                            bankCardNo: '',
                            bankName: '',
                            bankBranch: '',
                            code: ''
                        });
                        uni.showToast({
                            title: '注册成功,待审核',
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/login_m/login'
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                },
				errCallBack:function(res){
				}
            };
            http.request(params);*/
        },

        checkdForm: function () {
            let that = this;
			
			if(that.pic == null){
				uni.showToast({
				    title: '请上传头像',
				    icon: 'none',
				    duration: 1000
				});
				return false;
			}

            if (that.nickname == '') {
                uni.showToast({
                    title: '请输入姓名',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }

            if (that.phone == '') {
                uni.showToast({
                    title: '请输入手机号码',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}

            // if (that.code == '') {
            //     uni.showToast({
            //         title: '请输入验证码',
            //         icon: 'none',
            //         duration: 1000
            //     });
            //     return false;
            // }
			if (that.wxaccount == '') {
			    uni.showToast({
			        title: '请输入微信号',
			        icon: 'none',
			        duration: 1000
			    });
			    return false;
			}
            if (that.word == '') {
                uni.showToast({
                    title: '请输入创作者口令',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
			
			if(that.showMenu){
				if(!that.checked){
					uni.showToast({
					    title: '请阅读创作者协议',
					    icon: 'none',
					    duration: 1000
					});
					return false;
				}
			}
			
			

            // if (that.cardName == '') {
            //     uni.showToast({
            //         title: '请输入持卡人姓名',
            //         icon: 'none',
            //         duration: 1000
            //     });
            //     return false;
            // }

            // if (that.bankCardNo == '') {
            //     uni.showToast({
            //         title: '请输入银行卡号',
            //         icon: 'none',
            //         duration: 1000
            //     });
            //     return false;
            // }

            // if (that.bankName == '') {
            //     uni.showToast({
            //         title: '请输入银行名称',
            //         icon: 'none',
            //         duration: 1000
            //     });
            //     return false;
            // }

            // if (that.bankBranch == '') {
            //     uni.showToast({
            //         title: '请输入开户行',
            //         icon: 'none',
            //         duration: 1000
            //     });
            //     return false;
            // }

            return true;
        }
    }
};
</script>
<style>
@import './apply.css';
</style>
